<template>
  <div class="mx-5 my-1">
    <el-descriptions :column="columnCount" border>
      <template slot="title">
        <div class="is-size-4 mb-3 has-text-weight-bold">
          <span class=" primary-color">丨</span>个人信息
        </div>
      </template>
      <template slot="extra">
        <el-button
          icon="el-icon-edit"
          round
          @click="showPasswordDialog = true"
        >修改密码</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user" />
          用户名
        </template>
        {{ userName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          ID
        </template>
        {{ userId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets" />
          性别
        </template>
        <el-tag size="small">{{ sex === '1' ? '男' : '女' }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lock" />
          密码
        </template>
        **********
      </el-descriptions-item>
    </el-descriptions>

    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :before-close="handleCancel"
      :visible.sync="showPasswordDialog"
      width="300px"
    >
      <el-input
        v-model="newPassword"
        placeholder="请输入新密码"
        show-password
        class="mb-3"
      />

      <el-input
        v-model="confirmPassword"
        placeholder="请再次输入新密码"
        show-password
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="submitPassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      columnCount: window.innerWidth > window.innerHeight ? 3 : 1,
      userId: Cookies.get('admin_id'),
      userName: Cookies.get('admin_name'),
      sex: Cookies.get('admin_sex'),
      age: Cookies.get('admin_age'),
      showPasswordDialog: false,
      newPassword: '',
      confirmPassword: ''
    }
  },
  mounted() {},
  methods: {
    handleCancel() {
      this.newPassword = ''
      this.confirmPassword = ''
      this.showPasswordDialog = false
    },
    async submitPassword() {
      if (this.newPassword !== this.confirmPassword) {
        this.$message.error('两次输入的密码不一致')
        return
      }
      if (this.newPassword.length < 6) {
        this.$message.warning('密码长度不得少于6位')
        return
      }
      // TODO 对接修改密码的接口
      this.$message.info('修改成功！即将重新登录')
      this.showPasswordDialog = false
      setTimeout(() => {
        // 延迟3s之后重新登录
        this.$store.dispatch('user/logout')
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-text {
  color: #606266;
  font-size: 19px;
  padding: 0px 10px;
}
</style>
